<div class="left-column">
  @if (selectedSlot()) {
    <ix-disk-topology-description
      [selectedSlot]="selectedSlot()"
    ></ix-disk-topology-description>
  } @else {
    <h2>{{ 'Pools' | translate }}</h2>
  }
</div>

<div class="enclosure-container">
  <div class="image-container">
    <ix-enclosure-side
      class="enclosure-image"
      [class.has-side-switch]="hasMoreThanOneSide()"
      [enclosure]="enclosure()"
      [side]="selectedSide()"
      [slotTintFn]="slotTintFn()"
      [selectedSlot]="selectedSlot()"
      (selectedSlotChange)="onSlotSelected($event)"
    ></ix-enclosure-side>
  </div>

  @if (hasMoreThanOneSide()) {
    <ix-enclosure-side-switch
      class="side-switch"
      [enclosure]="enclosure()"
    ></ix-enclosure-side-switch>
  }
</div>

<div class="right-column">
  @if (selectedSlot()) {
    <ix-vdev-disks-legend
      [selectedSlot]="selectedSlot()"
      [poolColor]="poolColor()"
      (diskClick)="onVdevDiskClicked($event)"
    ></ix-vdev-disks-legend>
  } @else {
    <ix-pools-legend
      [enclosure]="enclosure()"
      [side]="selectedSide()"
      [poolColors]="poolColors()"
    ></ix-pools-legend>
  }
</div>
